<template>
	<div>
		<div class="flex">
			<div>
				<el-select v-model="form.type" 
					size="mini"
					placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
			</div>
		   <div style="margin-left: 10px;">
		        <el-button type="primary" @click="addBtn" size="mini">添加</el-button>
		    </div>
			<div style="margin-left: 10px;">
				 <el-button @click="createCode" size="mini">生成二维码</el-button>
			</div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"    label="类型">
				<template slot-scope="scope">
					{{['','轮播图','图片','富文本','表单','地图'][scope.row.type]}}
				</template>
			</el-table-column>
			<!-- <el-table-column   align="center"    prop="content"    label="内容"></el-table-column> -->
			<el-table-column   align="center"    prop="sort"    label="排序"></el-table-column>
			<el-table-column  label="状态"   align="center">
			     <template slot-scope="scope">
			        <div>
						<el-tag v-if="scope.row.status==0" size="small" effect="dark" type="danger">禁用</el-tag>
						<el-tag v-if="scope.row.status==1" size="small" effect="dark">启用</el-tag>
					</div>
			     </template>
			 </el-table-column>
			<el-table-column   align="center"    prop="add_time"    label="添加时间"></el-table-column>
			<el-table-column   align="center"    prop="update_time"    label="修改时间"></el-table-column>
		   <el-table-column  label="操作"   align="center">
		        <template slot-scope="scope">
					<span style="margin-right: 10px;" class="button_text" @click="editRow(scope.row)">编辑</span>
					<span class="button_text" @click="delRow(scope.row.id)">删除</span>
		        </template>
		    </el-table-column>
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		
		<el-dialog
				v-if="formShow"
		        :title="addTitle"
				:close-on-click-modal="false"
		        :visible.sync="formShow"
		        width="800px"
		>
		  <div>
			  <swiper v-if="form.type==1" 
				:formDD="form"
				@getFormVal="getFormVal" />
			  <banner v-if="form.type==2"
			  				:formDD="form"
			  				@getFormVal="getFormVal" />
			  <myEdit v-if="form.type==3"
			  				:formDD="form"
			  				@getFormVal="getFormVal" />
			  <myInput v-if="form.type==4"
			  				:formDD="form"
			  				@getFormVal="getFormVal" />
			  <myMap v-if="form.type==5"
			  				:formDD="form"
			  				@getFormVal="getFormVal" />
		  </div>
		</el-dialog>
		<el-dialog
				title="二维码"
				:close-on-click-modal="false"
				:visible.sync="codeShow"
				width="300px"
				>
				 <div id="d1" style="width: 100px;margin: 0 auto;" v-if="codeShow">
					 
				 </div> 
		</el-dialog>
	</div>
</template>

<script>
	import QRCode from 'qrcode2'
	import edit from '@/components/wangEditor'
	import swiper from './components/swiper'
	import banner from './components/banner'
	import myEdit from './components/myEdit'
	import myInput from './components/myInput'
	import myMap from './components/myMap'
	export default {
		data(){
			return {
				codeShow:false,
				title:"",
				page:1,
				pageSize:10,
				form:{
					id:null,
					type:"1",
					content:"",
					status:"1",
					sort:1,
				},
				table_name:'code_info',
				addTitle:'新增',
				options:[
					{
					  value: '1',
					  label: '轮播图'
					},
					{
					  value: '2',
					  label: '图片'
					},
					{
					  value: '3',
					  label: '富文本'
					},
					{
					  value: '4',
					  label: '表单'
					},
					{
					  value: '5',
					  label: '地图'
					},
				]
			}
		},
		components:{
			edit,swiper,banner,myEdit,myInput,myMap
		},
		
		mounted() {
			this.lodeList()
		},
		methods:{
			createCode(){
				this.codeShow = true
				let cid = sessionStorage.getItem('cid')
				let url = `${this.$baseUrl}/h5/#/?cid=${cid}`

				setTimeout(()=>{
					let qrcode1 = new QRCode('d1',{
					  text:url
					})
				},100)
			},
			getFormVal(val){
				this.form.content = val.content
				this.form.status = val.status
				this.form.sort = val.sort
				this.form.cid = sessionStorage.getItem('cid')
				let params = {
					table_name:this.table_name,
					dd:this.form
				}
				this.$post('/base/baseAddUpd', params,res=>{
					 this.formShow = false
					 this.lodeList()
				})
			},
			editRow(row){
				this.addTitle = '编辑'
				this.formShow = true
				console.log(row)
				for(let i in this.form){
					this.form[i] = row[i]
				}
				
				// setTimeout(()=>{
				// 	window.$editor.txt.html(row.remark)
				// },100)
				
			},
			delRow(id){
				this.$confirm('确定删除', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							let params = {
								table_name:this.table_name,
								dd:{
									id:id
								}
							}
				          this.$post('/base/baseSoftDel',params,res=>{
							  this.lodeList()
						  })
				        })
			},
			clearSearch(){
				this.title = ''
				this.search()
			},
			confirm(){
				// this.form.remark = window.$editor.txt.html()
				this.$post('/homeSet/addEditAddress',this.form,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.formShow = false
						this.lodeList()
					}
				})
			},
			addBtn(){
				this.addTitle = '新增'
				this.form.id = null
				this.form.content = ''
				this.form.status = '1'
				this.form.sort = 1
				
				// setTimeout(()=>{
				// 	window.$editor.txt.html()
				// },100)
				this.formShow = true
			},
			lodeList(){
				let params = {
					table_name:this.table_name,
					page:this.page,
					pageSize:this.pageSize
				}
				this.$post('/index/codeSetList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
		}
	}
</script>

<style>
</style>